<template>
  <div class="org-main-table-container">
    <wf-el-table
      height="100%"
      :list="list"
      :total="total"
      :current="current"
      :loading="loading"
      @on-page-change="onPageChange"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="jobNumber" width="150" label="工号"></el-table-column>
      <el-table-column prop="realName" width="150" label="姓名"></el-table-column>
      <el-table-column prop="mobilePhone" width="150" label="手机号码"></el-table-column>
      <el-table-column prop="birthday" width="150" label="生日"></el-table-column>
      <el-table-column prop="entryTime" label="入职日期"></el-table-column>
      <el-table-column prop="position" label="岗位"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <wf-el-auth-button
            auth-key="WALFARE-YGGL-BJYG"
            type="text"
            size="small"
            @click="showDetail(scope.row)"
          >
            查看详情
          </wf-el-auth-button>
        </template>
      </el-table-column>
    </wf-el-table>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex';

  import WfElTable from '@/components/Table/index';
  import { getUsers } from '@/api/organization';

  export default {
    components: {
      WfElTable,
    },
    props: {
      mainId: {
        type: Number,
        required: true,
      },
    },
    data() {
      return {
        current: 1,
        total: 0,
        list: [],
        multipleSelection: [],
        loading: false,
      };
    },
    computed: {
      ...mapGetters('user', ['userInfo']),
      organizationId() {
        return this.userInfo.organId;
      },
      isEmpty() {
        return this.list.length === 0;
      },
    },
    watch: {
      mainId(id) {
        const params = {
          deptId: id,
          organizationId: this.organizationId,
          current: 1,
        };
        this.initTable(params);
      },
    },
    mounted() {
      if (this.mainId !== 0 && this.mainId !== '') {
        this.initTable({ deptId: this.mainId, organizationId: this.organizationId, current: 1 });
      }
    },
    methods: {
      async initTable(params) {
        this.loading = true;
        const { data } = await getUsers(params);
        const { current, total, records } = data || {};
        this.list = records;
        this.current = current;
        this.total = total;
        this.multipleSelection = [];
        this.loading = false;
      },
      flushTable() {
        const params = {
          deptId: this.mainId,
          organizationId: this.organizationId,
          current: this.current,
        };
        this.initTable(params);
      },
      handleSelectionChange(data) {
        this.multipleSelection = data;
        this.$emit('selection-change', JSON.parse(JSON.stringify(data)));
      },
      onPageChange(data) {
        const params = {
          deptId: this.mainId,
          organizationId: this.organizationId,
          current: data.current,
        };
        this.initTable(params);
      },
      showDetail(row) {
        this.$emit('on-show-detail', row);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .org-main-table-container {
    height: calc(100% - 114px);
    overflow: hidden;
  }
</style>
